<template>
	<a-form
		ref="formRef"
		autocomplete="off"
		labelAlign="right"
		:wrapper-col="{ span: 16 }"
		:label-col="{ span: 8 }"
		:model="formData"
		:rules="formRules"
	>
		<a-row>
			<a-col :span="12">
				<a-form-item label="姓名:" name="name">
					<a-input v-model:value="formData.name" placeholder="请输入姓名" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="身份证:" name="idCard">
					<a-input v-model:value="formData.idCard" placeholder="请输入身份证号" />
				</a-form-item>
			</a-col> </a-row
		><a-row>
			<a-col :span="12">
				<a-form-item label="联系电话:" name="phone">
					<a-input :maxlength="11" v-model:value="formData.phone" placeholder="请输入联系电话" />
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="主营范围:" name="mainRange">
					<a-input v-model:value="formData.mainRange" placeholder="请输入主营范围" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="12">
				<a-form-item name="onlinePurchase" label="线上采购:">
					<a-checkbox v-model:checked="formData.onlinePurchase"></a-checkbox>
				</a-form-item>
				<a-form-item label="平台名:" name="platform">
					<a-input v-model:value="formData.platform" placeholder="请输入平台名" />
				</a-form-item>
				<a-form-item label="平台采购网址名:" name="purchaseSite">
					<a-input v-model:value="formData.purchaseSite" placeholder="请输入采购网址" />
				</a-form-item>
				<a-form-item name="headId" label="负责人">
					<xn-page-selector
						:field-names="{ label: 'name', value: 'id' }"
						:page-function="(param) => bizUserApi.userPage(param)"
						:show-search="true"
						@change="onHeadChange"
						search-field="name"
						ref="userRef"
						v-model:value="formData.headId"
						placeholder="请选择负责人"
					>
					</xn-page-selector>
				</a-form-item>
			</a-col>
			<a-col :span="12">
				<a-form-item label="身份证照片" name="idCardImage">
					<div style="display: inline-block">
						<ImageUpload
							@uploadRemove="(it) => uploadRemove(it, 1)"
							@uploadDone="(it) => uploadDone(it, 1)"
							ref="idCardFrontRef"
						/>
						<span>选择身份证正面</span>
					</div>
					<div style="display: inline-block; margin-left: 15px">
						<ImageUpload
							@uploadRemove="(it) => uploadRemove(it, 2)"
							@uploadDone="(it) => uploadDone(it, 2)"
							ref="idCardBackRef"
						/>
						<span>选择身份证反面</span>
					</div>
				</a-form-item>
				<a-form-item label="备注" name="remark">
					<a-textarea
						:auto-size="{ minRows: 2, maxRows: 2 }"
						v-model:value="formData.remark"
						placeholder="请输入备注"
					/>
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup name="personalForm">
	import { required, rules } from '@/utils/formRules'
	import ImageUpload from '@/components/XnUploadImage/index.vue'
	import xnPageSelector from '@/components/XnPageSelect/index.vue'
	import bizUserApi from '@/api/biz/bizUserApi'
	import { onMounted } from 'vue'
	const formData = ref({})
	const formRef = ref({})
	const idCardFrontRef = ref({})
	const idCardBackRef = ref({})
	const userRef = ref()
	// 默认要校验的
	const formRules = {
		name: [required('请输入姓名')],
		idCard: [required('请输入身份证'), rules.idCard],
		platform: [required('请输入平台名')],
		phone: [required('请输入手机号'), rules.phone],
		headId: [required('请输入负责人')],
		mainRange: [required('请输入主营范围')],
		idCardImage: [
			{
				validator: function (rule, value, callback) {
					if (!formData.value.idCardBack || !formData.value.idCardFront) {
						callback(new Error('请选择身份证照片'))
					} else {
						// 校验通过
						callback()
					}
				},
				trigger: 'blur'
			}
		]
	}

	const onHeadChange = (id, item) => {
		formData.value.head = item.name
	}

	onMounted(() => {
		userRef.value.onPage({})
	})
	const validate = () => {
		return new Promise((resolve, rejected) => {
			formRef.value
				.validate()
				.then(() => {
					resolve()
				})
				.catch((e) => {
					rejected(e)
				})
		})
	}

	const uploadDone = (files, type) => {
		if (type == 1) {
			formData.value.idCardFront = files[0].url
		} else {
			formData.value.idCardBack = files[0].url
		}
		if (formData.value.idCardBack && formData.value.idCardFront) {
			formData.value.idCardImage = 1
		} else {
			formData.value.idCardImage = null
		}
	}
	const uploadRemove = (file, type) => {
		if (type == 1) {
			formData.value.idCardFront = null
		} else {
			formData.value.idCardBack = null
		}
		formData.value.idCardImage = null
	}
	const setFormValue = (value) => {
		formData.value = value
		formData.value.idCardImage = 1
		if (value.idCardFront) {
			idCardFrontRef.value.setUploadFields([
				{
					url: value.idCardFront
				}
			])
			idCardBackRef.value.setUploadFields([
				{
					url: value.idCardBack
				}
			])
		}
	}
	const restForm = () => {
		formData.value = {}
	}
	defineExpose({
		formData,
		validate,
		setFormValue,
		restForm
	})
</script>

<style scoped :type="less">
	.childAddButton {
		margin-bottom: 10px;
	}
</style>
